<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>list</title>
    <link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
</head>

<body>
<div id="section_container">
    <section data-role="section" id="page_index" class="active">
        <header>
            <div class="titlebar">
            	<a data-toggle="back" href="#"><i class="icon icon-arrowleft"></i></a>
                <h1>列表</h1>
            </div>
        </header>
        <article id="main_article" data-role="article" class="active">
            <details open>
                <summary class="sliver">单行列表</summary>
                <ul class="list noclick">
                    <li>
                        <div class="justify-content">Agile Lite轻量级HTML5框架介绍</div>
                    </li>
                    <li>
                        <div class="justify-content">ExMobi+Agile开发注意事项</div>
                        <div class="justify">
                            <i class="icon icon-arrowright"></i>
                        </div>
                    </li>
                    <li>
                        <div class="justify box box-middle">
                            <i class="icon icon-fav-fill"></i>
                        </div>
                        <div class="justify-content box box box-middle">
                            <p class="nowrap">ExMobi全面支持HTML5和Native融合，此版UI的名称真是还没想好呢？因为注重通用性，叫种子UI？</p>
                        </div>
                        <div class="justify">
                            <button>按钮</button>
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">双行列表</summary>
                <ul class="list">
                    <li>
                        <div class="justify-content">
                            <p>Agile Lite轻量级HTML5框架介绍</p>
                            <small>Agile Lite是一个基于HTML5+CSS3+JS的移动前端框架</small>
                        </div>
                    </li>
                    <li class="noclick">
                        <div class="justify-content">
                            <p>ExMobi+Agile开发注意事项</p>
                            <small>Agile支持单页和多页模式开发，在ExMobi中建议使用多页模式，让代码更容易维护</small>
                        </div>
                        <div class="justify box box-middle">
                            <i class="icon icon-arrowright"></i>
                        </div>
                    </li>
                    <li>
                        <div class="justify">
                            <i class="icon icon-fav-fill"></i>
                        </div>
                        <div class="justify-content">
                            <p class="nowrap">ExMobi全面支持HTML5和Native融合，此版UI的名称真是还没想好呢？因为比较硬，叫汗子UI？</p>
                            <small class="nowrap">Agile支持单页和多页模式开发，在ExMobi中建议使用多页模式，让代码更容易维护</small>
                        </div>
                        <div class="justify">
                            <button>按钮</button>
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">新闻列表</summary>
                <ul class="list">
                    <li>
                        <div class="justify">
                            <img src="http://robort007.github.io/SeedsUI/preview/img/list/1.jpg"/>
                        </div>
                        <div class="justify-content" style="height:67px;">
                            <a>习近平主席全面从严治党大韬略：剑指顽疾</a>
                            <small class="bottom left">12-24</small>
                            <small class="bottom right">
                                <label>511</label>
                                <i class="icon icon-chat"></i>
                            </small>
                        </div>
                    </li>
                    <li>
                        <div class="justify-content">
                            <p><span class="mark-cancel">时政</span>习近平主席全面从严治党大韬略：剑指顽疾</p>
                            <small class="nowrap">今年还有十几个小时就要结束了，您的鱼卖得怎么样了呢？</small>
                        </div>
                        <div class="justify">
                            <img src="http://robort007.github.io/SeedsUI/preview/img/list/1.jpg"/>
                        </div>
                    </li>
                    <li class="nojustify">
                        <div class="justify-content">
                            <p><span class="mark-info">典型</span>七旬老人高效养罗非只赚不亏！</p>
                            <small class="nowrap">”陈叔“运用科技的力量高效养殖，保持盈利，他是如何养罗非赚钱的？</small>
                        </div>
                        <div class="justify">
                            <img src="http://robort007.github.io/SeedsUI/preview/img/components/banner.jpg" class="width-full">
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">评论列表</summary>
                <ul class="list noclick">
                    <li>
                        <div class="justify">
                            <div class="photo size40" style="background-image:url(http://robort007.github.io/SeedsUI/preview/img/list/photo.png)"></div>
                        </div>
                        <div class="justify-content">
                            <a>广州网友</a>
                            <a class="top right">
                                <small>
                                    <span>116</span>
                                    <i class="icon icon-thumb-fill"></i>
                                </small>
                            </a>
                            <small class="nowrap">2小时前</small>
                            <p style="margin-top:8px;">辛苦了，习大大！</p>
                        </div>
                    </li>
                    <li>
                        <div class="justify">
                            <div class="photo size40" style="background-image:url(http://robort007.github.io/SeedsUI/preview/img/list/photo.png)"></div>
                        </div>
                        <div class="justify-content">
                            <a>广州网友</a>
                            <a class="top right">
                                <small>
                                    <span>116</span>
                                    <i class="icon icon-thumb-fill"></i>
                                </small>
                            </a>
                            <small class="nowrap">2小时前</small>
                            <p style="margin-top:8px;">辛苦了，习大大！</p>
                        </div>
                    </li>
                </ul>
                
            </details>

            <details open>
                <summary class="sliver">邮件列表</summary>
                <ul class="list">
                    <li>
                        <div class="justify box box-middle">
                            <div class="photo bg-1">少波</div>
                        </div>
                        <div class="justify-content">
                            <small>
                                <i class="bg-warn radiusround size8"></i>
                                <label class="bold">张少波</label>
                                <label class="float-right">12月21日</label>
                                <i class="icon icon-fav-fill float-right color-warn"></i>
                            </small>
                            <p>您的圣诞礼物已经备好，看看咋样</p>
                            <small class="nowrap">[图片]Hi,柱子:圣诞节到了，给您的圣诞礼物已经备好，来看看喜不喜欢</small>
                        </div>
                    </li>
                    <li>
                        <div class="justify box box-middle">
                            <div class="photo bg-primary"><i class="icon icon-person"></i></div>
                        </div>
                        <div class="justify-content">
                            <small>
                                <i class="bg-warn radiusround size8"></i>
                                <label class="bold">张少波</label>
                                <label class="float-right">12月21日</label>
                                <i class="icon icon-fav-fill float-right color-warn"></i>
                            </small>
                            <p>您的圣诞礼物已经备好，看看咋样</p>
                            <small class="nowrap">[图片]Hi,柱子:圣诞节到了，给您的圣诞礼物已经备好，来看看喜不喜欢</small>
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">功能列表</summary>
                <ul class="list border-content">
                    <li>
                        <div class="justify">
                            <i class="size32 icon-folder-fill color-info"></i>
                        </div>
                        <div class="justify-content nowrap box box box-middle">
                            最新文档
                        </div>
                        <div class="justify box box-middle">
                            <span class="badge size32">1</span>
                        </div>
                    </li>
                    <li>
                        <div class="justify">
                            <i class="size32 icon-chat-fill color-warn"></i>
                        </div>
                        <div class="justify-content nowrap box box box-middle">
                            通知公告
                        </div>
                        <div class="justify box box-middle">
                            <span class="tip">1</span>
                        </div>
                    </li>
                </ul>
            </details>
            
            <details open>
                <summary class="sliver">应用列表</summary>
                <ul class="list">
                    <li>
                        <div class="justify">
                            <div class="tip" style="position:absolute;top:0px;right:0px;">12</div>
                            <div class="photo size60 radius4" style="background-image:url(http://robort007.github.io/SeedsUI/preview/img/list/weixin.png)">
                            </div>
                        </div>
                        <div class="justify-content nowrap">
                            <p>微信</p>
                            <p>
                                <i class="star icon-fav-fill active"></i>
                                <i class="star icon-fav-fill active"></i>
                                <i class="star icon-fav-fill active-half"></i>
                                <i class="star icon-fav-fill"></i>
                                <i class="star icon-fav-fill"></i>
                            </p>
                            <small>聊天与社交 31.9M</small>
                        </div>
                        <div class="justify box box-middle">
                            <button class="desaturate outline">打开</button>
                        </div>
                    </li>
                    <li>
                        <div class="justify">
                            <div class="photo default size60 radius4">
                                <i class="icon icon-appbag-fill"></i>
                            </div>
                        </div>
                        <div class="justify-content nowrap">
                            <p>QQ</p>
                            <p>
                                <i class="star icon-fav-fill active"></i>
                                <i class="star icon-fav-fill active"></i>
                                <i class="star icon-fav-fill active"></i>
                                <i class="star icon-fav-fill active"></i>
                                <i class="star icon-fav-fill active-half"></i>
                            </p>
                            <small>聊天与社交 27.2M</small>
                        </div>
                        <div class="justify box box-middle">
                            <button class="success outline">安装</button>
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">联系人列表</summary>
                <ul class="list between border-content">
                    <li>
                        <div class="justify">
                            <div class="photo bg-6">
                                <div class="tip" style="position:absolute;top:-4px;right:-4px;">12</div>
                                <i class="icon icon-chatdot-fill"></i>
                            </div>
                        </div>
                        <div class="justify-content">
                            <p>小助手</p>
                            <small class="top right">昨天 11:50</small>
                            <small class="nowrap">会话已完成，请您在会话记录中填写报告</small>
                        </div>
                    </li>
                    <li>
                        <div class="justify">
                            <div class="photo bg-2">少波</div>
                        </div>
                        <div class="justify-content">
                            <p>张少波</p>
                            <small class="top right">昨天 11:50</small>
                            <small class="nowrap">本次会话结束，感谢您的使用</small>
                        </div>
                    </li>
                    <li>
                        <div class="justify">
                            <div class="photo" style="background-image:url(http://robort007.github.io/SeedsUI/preview/img/components/banner.jpg)"></div>
                        </div>
                        <div class="justify-content">
                            <p>张少波</p>
                            <small class="top right">昨天 11:30</small>
                            <small class="nowrap">本次会话结束，感谢您的使用</small>
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">时间轴列表</summary>
                <ul class="timeline dotted bg-white">
                    <li>
                        <div class="clock color-1" data-clock="11:24">
                            <div class="hour" style="transform: rotate(330deg);"></div>
                            <div class="minute" style="transform: rotate(144deg);"></div>
                            <div class="origin"></div>
                        </div>
                        <div class="justify-content">
                            <p class="size20">11:24</p>
                            <a><i class="icon icon-position size24"></i><span>江苏省南京市</span></a>
                            <small class="nowrap">我来上班啦</small>
                        </div>
                    </li>
                    <li>
                        <div class="clock color-2" data-clock="11:24">
                            <div class="hour" style="transform: rotate(330deg);"></div>
                            <div class="minute" style="transform: rotate(144deg);"></div>
                            <div class="origin"></div>
                        </div>
                        <div class="justify-content">
                            <p class="size20">11:24</p>
                            <a><i class="icon icon-position size24"></i><span>江苏省南京市</span></a>
                            <small class="nowrap">我来上班啦</small>
                        </div>
                    </li>
                </ul>
            </details>

            <details open>
                <summary class="sliver">时间轴列表</summary>
                <ul class="timeline">
                    <li>
                        <div class="timeline-dot">
                            Any
                        </div>
                        <div class="card width-full padding8">
                            <div class="sticker top right"><span>NEW</span></div>
                            <p class="size20">11:24</p>
                            <small class="nowrap">到达南京南站</small>
                        </div>
                    </li>
                    <li>
                        <div class="timeline-dot">
                            Any
                        </div>
                        <div class="card width-full padding8">
                            <p class="size20">11:24</p>
                            <small class="nowrap">进入南京中转站</small>
                        </div>
                    </li>
                </ul>
            </details>
        </article>
    </section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
    
    
    
    
    
    
    
</body>
</html>
